<!doctype html>
<html>
<head>
	<title>Item Click</title>
	<meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

	<script src="../../codebase/webix/webix.js" type="text/javascript"></script>
	<script src="../../codebase/kanban.js" type="text/javascript"></script>

	<link rel="stylesheet" type="text/css" href="../../codebase/webix/webix.css">
	<link rel="stylesheet" type="text/css" href="../../codebase/kanban.css">

	<script src="../common/data.js"></script>
	<script src="../common/types.js"></script>
	<link rel="stylesheet" type="text/css" href="../common/style.css">


</head>
<body>
<script type="text/javascript">



	webix.ready(function(){
		webix.ui({
			type:"space",
			rows:[
				{  view: "label", label: "It is possible to process clicks and selection in lists"},
				{
					view:"kanban",
					id: "myBoard",
					type: "wide",
					on:{
						onListItemClick: function(id,e,node,list){
							webix.message("Item '"+this.getItem(id).text+"' has been clicked.");
						},
						onListBeforeSelect: function(id,state,list){
							webix.message("Item '"+this.getItem(id).text+"' will be selected.");
							return true;
						},
						onListAfterSelect: function(id,state,list){
							webix.message("Item '"+this.getItem(id).text+"' has been selected.");
						}
					},
					cols:[
						{ header:"Backlog",
							body:{ view:"kanbanlist", status:"new", type: "avatars"}
						},
						{ header:"In Progress",
							body:{ view:"kanbanlist", status:"work", type: "avatars"}
						},
						{ header:"Testing",
							body:{ view:"kanbanlist", status:"test", type: "avatars"}
						},
						{ header:"Done",
							body:{ view:"kanbanlist", status:"done", type: "avatars"}
						}
					],
					data: base_task_set
				}
			]

		});
	});
</script>
</body>
</html>